<template>
    <div class="container">
        <div class="tree-wrap">
            <a-input-search style="margin-bottom: 8px" v-model="searchStr" placeholder="搜索物料编码/名称" @search="searchTree"/>
            <a-tree :checkStrictly="true" :expanded-keys="expandedKeys" :auto-expand-parent="autoExpandParent" :tree-data="treeDataList" :replaceFields="replaceFields" @expand="onExpand" @select="selectTree" ></a-tree>
        </div>
        <div class="table-wrap">
            <DataTable rowKey="id" :showConfig="false" :tableData="Data" :tableColumn="tableColumn" :pageConfig="pageConfig" childrenColumnName="typeSettings"></DataTable>
        </div>
    </div>
</template>
<script lang="ts">
import { Component, Watch, Vue } from 'vue-property-decorator'
@Component
export default class unitConfig extends Vue {
    timer:any=null
    tree_id:any = ''
    expandedKeys: any[] = []
    treeData:any[] = []
    treeDataList:any[]=[]
    searchStr:any = ''
    unitList:any[] = [
        {
            label: '自输入',
            value: ''
        },
        {
            label: '吨',
            value: '1'
        },
        {
            label: '个',
            value: '2'
        },
        {
            label: '件',
            value: '3'
        },
        {
            label: '米',
            value: '4'
        },
        {
            label: '立方米',
            value: '5'
        },
        {
            label: '斤',
            value: '6'
        },
        {
            label: '箱',
            value: '7'
        },
        {
            label: '平方米',
            value: '8'
        }
    ]
    Data: any[] = []
    autoExpandParent: boolean = true
    replaceFields: any = {
        children: 'child',
        title: 'codeName',
        key: 'id'
    }
    tableColumn: any = {
        code: {
            label: '物料分类编码',
            width: 120
        },
        name: {
            label: '物料分类名称',
            width: 120
        },
        materialNum: {
            label: '可周转物料种类个数',
            width: 100
        },
        settingUnit: {
            label: '当前计量单位',
            width: 100
        },
        changeUnit: {
            label: '更改计量单位',
            width: 100,
            type: 'select2',
            options: this.unitList,
            callback: this.handleChageUnit
        }
    }
    pageConfig: any = {
        current: 1,
        total: 10,
        pageSize: 10,
        onChange: this.changePage
    }
    init () {
        this.getTreeData()
        this.getTableData(this.tree_id)
    }
    // 选择改变单位
    handleChageUnit (val:any, row:any) {
        let that = this
        let data:any = {
            typeId: row.id,
            level: row.typeSettings ? 1 : 2
        }
        if (val == '') {
            row.isFalg = true
            return
        }
        if (val.target && val.target.value) {
            data.settingUnit = val.target.value
        } else {
            data.settingUnit = this.unitList[val].label
        }
        // 防抖
        clearTimeout(this.timer)
        that.timer = setTimeout(() => {
            that.changeUnitApi(data)
        }, 500);
    }
    // 更改计量单位
    changeUnitApi (data:any) {
        this.$api.assetSettingUpdateSettingUnitFetch(data).then((res) => {
            if (res.code == 0) {
                this.$message.success('操作成功');
                this.getTableData(this.tree_id)
            }
        }).catch()
    }

    // 获取左边树形结构
    getTreeData () {
        this.$api.assetSettingMaterielTypeTreeFetch({searchValue: ''}).then((res:any) => {
            if (res.code == 0) {
                this.treeData = res.data[0].child
                this.treeDataList = res.data[0].child
            }
        }).catch()
    }
    // 获取右侧数据
    getTableData (id:any) {
        this.$api.assetSettingMaterielTypeListFetch({parentId: id, page: this.pageConfig.current, size: this.pageConfig.pageSize}).then((res:any) => {
            if (res.code == 0) {
                this.pageConfig.total = res.data.total
                res.data.records.map((item:any) => {
                    item.isFalg = false
                    item.typeSettings.map((items:any) => {
                        items.isFalg = false
                    })
                })
                this.Data = res.data.records
            }
        }).catch()
    }
    // 搜索
    searchTree (val:any) {
        let value = this.searchStr;
        this.treeDataList = this.rebuildData(value, this.treeData)
    }

    rebuildData (value:any, arrList:any) {
        let newarr:any = [];
        arrList.forEach((item:any) => {
            if (item.name.indexOf(value) > -1 || item.code.indexOf(value) > -1) { // 判断条件
                newarr.push(item);
            } else {
                if (item.child && item.child.length > 0) {
                    let redata = this.rebuildData(value, item.child);
                    let obj = {
                        ...item,
                        child: redata
                    };
                    if (redata && redata.length > 0) {
                        newarr.push(obj);
                    }
                }
            }
        });
        return newarr;
    }

    selectTree (selectedKeys: any, e:any) {
        if (e.selectedNodes[0].data.props.child && e.selectedNodes[0].data.props.child.length > 0) {
            console.log(111)
        } else {
            if (selectedKeys[0]) {
                sessionStorage.setItem('tree_id', selectedKeys[0])
                this.tree_id = selectedKeys[0]
                this.getTableData(selectedKeys[0])
            } else {
                this.getTableData('')
            }
        }
    }
    onExpand (expandedKeys: any[]) {
        this.expandedKeys = expandedKeys;
        this.autoExpandParent = false;
    }
    changePage (val: number) {
        this.pageConfig.current = val;
        this.getTableData(this.tree_id)
    }
}
</script>
<style lang="scss" scoped>
.container{
    display: flex;
    justify-content: space-between;
    .tree-wrap{
        width: 200px;
        margin-top: 20px;
    }
    .table-wrap{
        width: calc(100% - 250px);
    }

}
/deep/ .ant-table-row-cell-break-word{
    line-height: 32px !important;
}
/deep/ .ant-table-row-cell-break-word:nth-child(1),.ant-table-row-cell-break-word>div{
    height: 100% !important;
    display: flex;
    align-items: center;
}
</style>
